import React from 'react';
//  短信登录
// 引入验证码组件
import Captcha from '../../components/Captcha';
import { Button, Form, Input, Space,message } from 'antd';
// 引入图标组件
import { KeyOutlined, UserOutlined,PictureOutlined } from '@ant-design/icons';
// 引入状态hook
import { useState } from 'react';
// 导入hook用来操作redux 
import {useDispatch} from 'react-redux';
// 导入hook用来进行路由跳转
import { useHistory } from 'react-router-dom'
// 导入 hook操作子组件实例 
import { useRef } from 'react'
// 引入图形码校验接口
import { verifyCaptcha} from '@/api/login'
const MobileLogin = () => {
    const [key, setKey] = useState('');
    // 定义的倒计时的初始值
    let [time, setTime] = useState(10); 
      // 创建ref 对象
      const ref1 = useRef();
      // 获取form 表单实例(antd form 表单提供的方法)
      const [form] = Form.useForm();
      // 定义一个savekey 函数
      const saveKey = (key) => {
          setKey(key)
      }
    //   定义定时器
      let timer = null;


    //  点击发送验证码的操作
     // 定义发送验证码函数
     const sendmessageFn = () => {
        // 01: 点击发送验证码, 首先需要验证 手机号和图形验证码是否填写
        form.validateFields(['mobile', 'captcha']).then(res => {
            // 表示验证通过
            // 校验图形验证码是否输入正确
            verifyCaptcha({
                key: key,
                captcha: res.captcha
            }).then(res1 => {
                // console.log('res1', res1);
                if (res1.data.errNo == 0) {
                    // 表示图形验证码验证成功，调用发送验证码接口和进行定时器倒计时
                    timer = setInterval(() => {
                        time--
                        if (time == 0) {
                            time = 10
                            clearInterval(timer) // 清除定时器
                        }
                        setTime(time)
                    }, 1000)

                } else {
                    // 表示图形验证码验证失败进行表单清空
                    message.error(res1.data.errText, 1, () => {
                        ref1.current.loadashFn();
                        form.setFieldsValue({
                            mobile: '',
                            captcha: ''
                        })
                    })
                }
            })


        }).catch(err => {
            // 表示验证失败
            console.log('验证失败', err);
        })

    }

    // 点击登陆时的操作
    // 登录验证成功执行的函数
    const onFinish = (values) => {
        // 在这里可以调用短信登录接口, 成功后,存储用户菜单和token之后跳转到首页
        console.log('value', values);
    };
    // 登录验证失败执行的函数
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div>
 <Form
                name="basic"
                wrapperCol={{
                    span: 23,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                size='large'
                // 表单实例属性
                form={form}
            >
                <Form.Item
                    name="mobile"
                    rules={[
                        {
                            required: true,
                            message: '请输入手机号',
                        },
                    ]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户手机号" />
                </Form.Item>

                {/* 图形验证 */}
                <Space>
                <Form.Item
                    name="captcha"
                    rules={[
                        {
                            required: true,
                            message: '请输入图形验证码!',
                        },
                    ]}
                >
                    
                    <Input prefix={<PictureOutlined className="site-form-item-icon" />} placeholder="图形验证码" />
                </Form.Item>
                <Form.Item>
                     {/* 验证码组件 */}
                     {/* 运用父传给子函数，子组件调用函数实现子传父，父组件收到key */}
                    <Captcha h={38} saveKey={saveKey} ref={ref1}></Captcha>
                </Form.Item>
                </Space>

                 {/* 短信验证码 */}
                 <Space>
                    <Form.Item
                        name="code"
                        rules={[
                            {
                                required: true,
                                message: '请输入短信验证码!',
                            },
                        ]}
                    >
                    <Input prefix={<KeyOutlined className="site-form-item-icon" />} placeholder="短信验证码" />
                    </Form.Item>
                    <Form.Item>
                        {/* 发送验证码按钮 */}
                        <Button disabled={time != 10} onClick={sendmessageFn}>{time != 10 ? `倒计时${time}秒` : '发送验证码'}</Button>
                    </Form.Item>
                </Space>
                <Form.Item
                    wrapperCol={{
                        span: 23,
                    }}
                >
                    <Button type="primary" htmlType="submit" block>
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

export default MobileLogin;
